<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子组件接收父组件传的值</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>子组件接收父组件传的值</h1>
        <parent></parent>
    </div>

    <template id="template1">
        <div>
            <template-item v-for="(item, index) in items" :key="index" :name="item.name">父组件模版</div>
        </div>
    </template>

    <template id="template2">
        <div>
            <span>{{name}}</span>
        </div>
    </template>

    <script>
        const newsItem = {
            template:"#template2",
            props:["name"]
        }

        const newsList = {
            components:{
                "template-item":newsItem
            },
            template:"#template1",
            data(){
                return{
                    items:[
                        {name:"页面"},
                        {name:"购物车"},
                        {name:"我的"}
                    ]  
                }          
            },
        }

        new Vue({
            el:"#app",
            components:{
                "parent":newsList
            }
        })
    </script>
</body>
</html>